<!DOCTYPE html>
<html lang="en">

<!--
  Author：蓝田_Loto
  Date：2018-10-15 17:55
  PageName：e_Text_Content.html
  Function：CSS3新增文本样式 - 添加动态内容
  URL：http://localhost:8080/e3_webpage_CSS3_TextStyle/e_Text_Content.html
-->

<head>
    <meta charset="UTF-8">
    <title>CSS3新增文本样式 - 添加动态内容</title>

    <style type="text/css">
        /* 1、使用content属性在当前元素内插入图像 */
        div {
            padding: 50px;
            border: solid 1px red;
            content: url(images/TD.jpg);
        }

        /* ========================================================*/
        /* 2、设计多级层级目录序号 */

        /* 清除默认的序号 */
        ol {
            list-style: none;
        }

        /* 设计层级目录序号的字体样式 */
        li:before {
            color: #f00;
            font-family: Times New Roman;
        }

        /* 设计递增函数a，递增起始值为1 */
        li {
            counter-increment: a 1;
        }

        /* 把递增值添加到列表项前面 */
        li:before {
            content: counter(a) ". ";
        }

        /* 设计递增函数b，递增起始值为1 */
        li li {
            counter-increment: b 1;
        }

        /* 把递增值添加到二级列表项前面 */
        li li:before {
            content: counter(a) "." counter(b) ". ";
        }

        /* 设计递增函数c，递增起始值为1 */
        li li li {
            counter-increment: c 1;
        }

        /* 把递增值添加到三级列表项前面 */
        li li li:before {
            content: counter(a) "." counter(b) "." counter(c) ". ";
        }
    </style>
</head>

<body>
<div></div>

<ol>
    <li>一级列表项目1
        <ol>
            <li>二级列表项目1</li>
            <li>二级列表项目2
                <ol>
                    <li>三级列表项目1</li>
                    <li>三级列表项目2</li>
                </ol>
            </li>
        </ol>
    </li>

    <li>一级列表项目2</li>
</ol>
</body>
</html>